<template>
    <div>
        <el-dialog
            :title="formChange.title"
            :visible.sync="show"
            :beforeClose="(close)=>{clearForm('formRef',close)}"
            :closeOnClickModal="false"
            width="1000px"
        >
            <el-form :model="myData" label-width="80px" :rules="formRules" ref="formRef">
                <table style="width:100%;">
                    <tr>
                        <td>
                            <el-form-item label="上级机构" prop="pid">
                                <el-select
                                    placeholder="选择上级机构"
                                    v-model="myData.pid"
                                    size="full"
                                    :disabled="formType==1||formType==3"
                                >
                                    <el-option
                                        v-for="item in tree"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                        <span style="float: left">
                                            <span v-html="item.html"></span>
                                            {{ item.name }}
                                        </span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="归属区域" prop="regionid">
                                <el-select
                                    placeholder="选择归属区域"
                                    v-model="myData.regionid"
                                    :disabled="formType==1"
                                >
                                    <el-option
                                        v-for="item in areaTree"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    >
                                        <span style="float: left">
                                            <span v-html="item.html"></span>
                                            {{ item.name }}
                                        </span>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="机构名称" prop="name">
                                <el-input v-model="myData.name" :readonly="formType==1"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="机构编码" prop="number">
                                <el-input v-model="myData.number" :readonly="formType==1"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="机构类型" prop="type">
                                <el-select
                                    v-model="myData.type"
                                    placeholder="请选择机构类型"
                                    style="width:100%;"
                                    :disabled="formType==1"
                                >
                                    <el-option
                                        v-for="item in types"
                                        :key="item.id"
                                        :label="item.value"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="机构级别" prop="meLevel">
                                <el-select
                                    v-model="myData.meLevel"
                                    placeholder="请选择机构级别"
                                    style="width:100%;"
                                    :disabled="formType==1"
                                >
                                    <el-option
                                        v-for="item in levels"
                                        :key="item.id"
                                        :label="item.value"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="主负责人" prop="lordPrincipal">
                                <el-input
                                    v-model="myData.lordPrincipal"
                                    readonly
                                    placeholder="请选择主负责人"
                                    :value="myData.lordPrincipalName"
                                    @focus="()=>{showSelectUser('lordPrincipal')}"
                                ></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="副负责人" prop="vicePrincipal">
                                <el-input
                                    v-model="myData.vicePrincipal"
                                    readonly
                                    placeholder="请选择副负责人"
                                    :value="myData.vicePrincipalName"
                                    @focus="()=>{showSelectUser('vicePrincipal')}"
                                ></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="联系地址" prop="address">
                                <el-input v-model="myData.address" :readonly="formType==1"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="邮政编码" prop="postalCode">
                                <el-input v-model="myData.postalCode" :readonly="formType==1"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="电话" prop="phone">
                                <el-input v-model="myData.phone" :readonly="formType==1"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="传真" prop="fax">
                                <el-input v-model="myData.fax" :readonly="formType==1"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="myData.email" :readonly="formType==1"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="备注" prop="note">
                                <el-input v-model="myData.note" :readonly="formType==1"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>

                <el-form-item class="txt_r mt_20">
                    <el-button
                        v-if="formChange.btn"
                        type="primary"
                        @click="submit"
                    >{{formChange.btnVal}}</el-button>
                    <el-button @click="()=>{clearForm('formRef')}">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
            title="选择负责人"
            :visible.sync="showSelectAdmin"
            :closeOnClickModal="false"
            width="1100px"
        >
            <admin :isSelect="true" :show="showSelectAdmin" @fillUser="fillUser"></admin>
            <div class="txt_r mt_20">
                <el-button type="primary" @click="adminSelOk">确定</el-button>
                <el-button @click="showSelectAdmin=false">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import * as apis from "../../api/system/institutiion";
import { getTree } from "../../api/system/sysArea";
import admin from "./authAdmin";

export default {
    name: "institutionForm",
    data() {
        return {
            // 数据
            myData: {},
            // 机构树
            tree: [],
            // 区域树
            areaTree: [],
            // 机构类型
            types: [],
            // 机构级别
            levels: [],
            // 负责人
            showSelectAdmin: false,
            admin: {},
            adminType: "lordPrincipal",
            adminIsSelect: false,
            // 验证
            formRules: {
                pid: [
                    {
                        required: true,
                        message: "请选择上级机构",
                        trigger: "change"
                    }
                ],
                regionid: [
                    {
                        required: true,
                        message: "请选择归属区域",
                        trigger: "change"
                    }
                ],
                name: [
                    {
                        required: true,
                        message: "请输入机构名称",
                        trigger: "blur"
                    }
                ],
                number: [
                    {
                        required: true,
                        message: "请输入机构编码",
                        trigger: "blur"
                    },
                    {
                        pattern: /^\d+$/,
                        message: "请输入正确的编码",
                        trigger: "blur"
                    }
                ],
                type: [
                    {
                        required: true,
                        message: "请选择机构类型",
                        trigger: "change"
                    }
                ],
                meLevel: [
                    {
                        required: true,
                        message: "请选择机构级别",
                        trigger: "change"
                    }
                ],
                postalCode: [
                    {
                        pattern: /^\d+$/,
                        message: "请输入正确的编码",
                        trigger: "blur"
                    }
                ],
                phone: [
                    {
                        pattern: /(^(\d{2,4}[-_－—]?)?\d{3,8}([-_－—]?\d{3,8})?([-_－—]?\d{1,7})?$)|(^0?1[35]\d{9}$)/,
                        message: "请输入正确的电话号码",
                        trigger: "blur"
                    }
                ],
                fax: [
                    {
                        pattern: /(^(\d{2,4}[-_－—]?)?\d{3,8}([-_－—]?\d{3,8})?([-_－—]?\d{1,7})?$)|(^0?1[35]\d{9}$)/,
                        message: "请输入正确的传真号码",
                        trigger: "blur"
                    }
                ],
                email: [
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: "blur,change"
                    }
                ]
            },
            // 设置标题按钮文字
            formChange: {}
        };
    },
    props: {
        formData: { type: Object, required: {} },
        show: { type: Boolean, required: false },
        formType: { type: Number, required: 1 }
    },

    methods: {
        // 提交
        submit() {
            this.$refs["formRef"].validate(valid => {
                if (!valid) {
                    return false;
                }
                let fun = "";
                switch (this.formType) {
                    case 2:
                        fun = "editSubmit";
                        break;
                    case 3:
                        fun = "subAddSubmit";
                        break;
                    case 4:
                        fun = "addSubmit";
                        break;
                }
                let obj = JSON.parse(JSON.stringify(this.myData));
                this.$emit(fun, obj);
                this.clearForm("formRef");
            });
        },
        // 点击负责人
        showSelectUser(n) {
            this.adminType = n;
            this.showSelectAdmin = true;
        },
        // 选择负责人
        fillUser(obj) {
            this.adminIsSelect = !!obj;
            this.admin = obj || {};
        },
        // 确定选择负责人
        adminSelOk() {
            if (!this.adminIsSelect) {
                this.$message({ type: "error", message: "请选择一名负责人" });
                return;
            }
            this.myData[this.adminType] = this.admin.id;
            this.myData[this.adminType + "Name"] = this.admin.name;
            this.showSelectAdmin = false;
        },
        // 获取树
        getTrees() {
            // 机构树
            apis.getTree().then(data => {
                if (data.code) {
                    return;
                }
                let list = data.data.list;
                list.unshift({
                    id: 0,
                    html: "",
                    level: 0,
                    name: "顶级"
                });
                this.tree = list;
            });
            // 区域树
            getTree().then(data => {
                if (data.code) {
                    return;
                }
                let list = data.data.list;
                this.areaTree = list;
            });
        },
        // 获取机构类型
        getType() {
            apis.getType().then(data => {
                if (data.code) {
                    return;
                }
                let list = data.data;
                this.types = this.toArr(list);
            });
        },
        // 获取机构级别
        getLevel() {
            apis.getLevel()
                .then(data => {
                    if (data.code) {
                        return;
                    }
                    let list = data.data;
                    this.levels = this.toArr(list);
                })
                .catch(() => {});
        },
        // 转数组
        toArr(obj) {
            let arr = [];
            for (let i in obj) {
                arr.push({ id: Number(i), value: obj[i] });
            }
            return arr;
        },
        // 清空表单  name: 表单rel名称，close：关闭方法/显示属性
        clearForm(name) {
            if (this.$refs[name]) {
                this.$refs[name].resetFields();
            }
            this.$emit("closeForm");
        },
        setFormTxt() {
            let o = {};
            switch (this.formType) {
                case 1:
                    o = { title: "查看详情", btn: false };
                    break;
                case 2:
                    o = {
                        title: "修改机构",
                        btn: true,
                        btnVal: "修改",
                        submit: "edit"
                    };
                    break;
                case 3:
                    o = {
                        title: "添加子机构",
                        btn: true,
                        btnVal: "添加",
                        submit: "add"
                    };
                    break;
                case 4:
                    o = {
                        title: "添加机构",
                        btn: true,
                        btnVal: "添加",
                        submit: "add"
                    };
            }
            this.formChange = o;
        }
    },
    created() {
        this.getTrees();
        this.getType();
        this.getLevel();
        this.setFormTxt();
    },
    watch: {
        show(val) {
            if (!val) {
                return;
            }
            this.getTrees();
            this.myData = JSON.parse(JSON.stringify(this.formData));
            delete this.myData.children;
        },
        formType() {
            this.setFormTxt();
        }
    },
    components: { admin }
};
</script>

<style scoped>
.el-select,
.el-input {
    width: 320px !important;
}
/*.el-form-item{margin-bottom:10px!important;}*/
.mt_20 {
    margin-top: 20px;
}
.txt_r {
    text-align: right;
}
</style>
